﻿@{
    ViewBag.Title = "用户添加";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="main-container">
    <div class="modal-form">
        <div class="modal-form-body">
            <form id="Form" method="post" action="@Url.Action("UserAdd", "System")" class="form-horizontal margin10-t">
                <div class="contrl">
                    <label>用户账号：</label>
                    @Html.TextBox("Account", "", new { @class = "input" })
                </div>
                <div class="contrl">
                    <label>密码：</label>
                    @Html.Password("password", "", new { @class = "input" })
                </div>
                <div class="contrl">
                    <label>确认密码：</label>
                    @Html.Password("ConfirmPassword", "", new { @class = "input" })
                </div>
                <div class="contrl">
                    <label>用户名称：</label>
                    @Html.TextBox("User_Name", "", new { @class = "input" })
                </div>
                <div class="contrl">
                    <label>角色：</label>
                    @Html.TextBox("UserRole", "", new { @class = "input", @onclick = "showMenu();" })
                    @Html.Hidden("hidUserRole", "")
                </div>
                @*<div class="contrl">
                    <label>邮箱：</label>
                    @Html.TextBox("Email", "", new { @class = "input" })
                </div>*@
                <div class="contrl">
                    <label>手机：</label>
                    @Html.TextBox("Mobile", "", new { @class = "input" })
                </div>
            </form>
        </div>
        <div class="modal-form-footer">
            <input type="button" class="btn-primary" value="保存" onclick="autoSubmit('System', 'UserAdd', 'UserList')" />
            <input type="button" class="btn-secondary" value="取消" onclick="CloseModelFrame()">
        </div>
    </div>
</div>
<div id="menuContent" class="menuContent" style="display: none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 210px; height: 100px; background-color: white"></ul>
</div>
<script src="~/Content/js/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Form").validate({
            rules: {
                @*    Account: { required: true,ajaxAccount:["@Url.Action("ValidateUserAccount", "System")"] },*@
                Account: { required: true, minlength: 6, maxlength: 100 },
                password: { required: true, minlength: 6, maxlength: 100 },
                User_Name: { required: true, minlength: 2, maxlength: 50 },
                UserRole: { required: true },
                ConfirmPassword: { required: true, equalTo: "#password" },
                Mobile: { minlength: 11, maxlength: 11 },
                Email: { required: true, email: true }
            },
            messages: {
                Account: {
                    required: "请输入用户帐号",
                    minlength: "长度不能少于6位",
                    maxlength: '长度不能大于100位'
                    //ajaxAccount:"账号已存在"
                },
                password: {
                    required: "请输入密码",
                    minlength: "长度不能少于6位",
                    maxlength: '长度不能大于100位'
                },
                User_Name: {
                    required: "请输入用户名称",
                    minlength: "长度不能少于2位",
                    maxlength: '长度不能大于50位'
                },
                UserRole: {
                    required: "请输入选择角色"
                },
                ConfirmPassword: {
                    required: "请输入确认密码",
                    equalTo: "两次输入密码不一致"
                },
                Mobile: {
                    minlength: "请输入11位的手机号码",
                    maxlength: "请输入11位的手机号码"
                },
                Email: {
                    required: "邮箱不能为空",
                    email: "邮箱格式不正确"
                }
            },
            errorElement: "em"
        });
    });

    var url = "@Url.Action("GetUserRoleJson", "System")";
    var setting = {
        async: {
            enable: true,
            url: url,
            autoParam: ["id", "pId", "name"]
        },
        check: {
            enable: true,
            chkboxType: { "Y": "", "N": "" }
        },
        view: {
            dblClickExpand: false,
            showLine: false,
            showIcon: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick,
            onCheck: onCheck
        }
    };

    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }

    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        nodes = zTree.getCheckedNodes(true),
        arrName = [];
        var arrId = [];
        for (var i = 0, l = nodes.length; i < l; i++) {
            arrName.push(nodes[i].name);
            arrId.push(nodes[i].id);
        }
        var cityObj = $("#UserRole");
        cityObj.attr("value", arrName.join(","));

        var og = $("#hidUserRole");
        og.attr("value", arrId.join(","));
    }

    function showMenu() {
        $("#UserRole").addClass("select-border-color");
        var cityObj = $("#UserRole");
        var cityOffset = $("#UserRole").offset();
        $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.expandAll(true);
        $("body").bind("mouseout", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
        $("#UserRole").removeClass("select-border-color");
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "UserRole" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting);
        $("#UserRole").focus(function () {
            $(this).blur();
        }).mousemove(function () {
            $(this).attr("title", $(this).val());
        });
    });
</script>
